<template>
	<view>
		
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
		<view class="cu-bar search flex justify-between" style="background-color: #f0f0f0;">
			<view class="action">
				<text class="cuIcon-back text-gray" @tap="goback"></text>
			</view>
			<view class="content">
				二维码名片
			</view>
			<view class="action">
				<text class="cuIcon-more" @tap="showModal" data-target="bottomModal"></text>
			</view>
		</view>
		
		<view class="cu-card dynamic qrCard" style="background-color: #fcfafa;">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="'background-image:url('+ userInfo.faceImage +');'"></view>
						<view class="content flex-sub">
							<view>{{userInfo.username}} <text class="cuIcon-people" style="margin-left: 10upx;"/></view>
							<view class="text-gray text-sm flex justify-between">
								省份 城市
							</view>
						</view>
					</view>
				</view>
				<view class="grid flex-sub padding-lr col-1">
					<view  class="bg-img only-img" v-bind:style="{backgroundImage: 'url(' + userInfo.qrcode + ')'}"></view>
				</view>
				<view style="margin-top: 30upx;" class="text-center">
					<text class="text-gray text-sm">扫一扫上面的二维码图案，加我微信</text>
				</view>
			</view>
		</view>	
		
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green">确定</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl">
					<view class="modalAction padding solids cuIcon-upload" @tap="scanQR()">扫描二维码</view>
					<view class="modalAction padding solids" @tap="saveQR()">保存二维码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		onLoad() {
			this.userInfo = this.$tool.getStorageSync("userInfo")
		},
		data() {
			return {
				userInfo: {},
				modalName: null
			}
		},
		methods: {
			goback() {
				uni.navigateBack(-1)
			},
			// 展示底部弹出的模态框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			// 隐藏底部弹出的模态框
			hideModal(e) {
				this.modalName = null
			},
			// 保存二维码
			saveQR() {
				uni.saveImageToPhotosAlbum({
					filePath: this.userInfo.qrcode,
					success: function() {
						console.log('save success');
					}
				});
			},
			// 扫描二维码
			scanQR() {
				console.log('点击了扫描二维码');
			}
		}
	}
</script>

<style>
		 .status_bar {
		      height: var(--status-bar-height);
		      width: 100%;
		  }
		page {
			background-color: #f0f0f0;
		}
		.modalAction {
			width: 100%;
			height: 100upx;
			background-color: bg-white;
			color: #22d848;
			margin-bottom: 10upx;
		}
		.qrCard {
			margin-top: 200upx;
			margin-right: 50upx;
			margin-left: 50upx;
		}
</style>
